import { CheckboxGroupComponent } from './checkbox-group.component';
import { Component, OnInit, Input, Output,ViewEncapsulation, OnChanges, EventEmitter, ElementRef, Optional, ViewChild, forwardRef, SimpleChanges, AfterViewInit, } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ElementuiService } from './../elementui.service';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'el-checkbox-button',
  templateUrl: './checkbox-button.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class CheckboxButtonComponent implements OnInit, AfterViewInit, ControlValueAccessor {
  private hostGroup: any;
  private el: any;
  private domSanitizer: any;
  @ViewChild('content') content: any;
  @Input() disabled: boolean = false;
  @Input() border: boolean = false;
  @Input() label: string = '';
  @Input() size: string = '';
  @Input() model: any;
  @Input() indeterminate: boolean = false;
  @Input() checked: boolean = false;
  @Input() name: string = '';
  @Input() trueLabel: string | number = '';
  @Input() labels: any = [];
  @Input() parentIsGroup: boolean = false;
  @Input() isFocus: boolean = false;
  showLabel: boolean = false;
  @Output() modelChange: EventEmitter<any> = new EventEmitter();
  private controlChange: any = function () { };
  private controlTouch: any = function () { };
  styleStr = '';

  constructor(hostGroup: CheckboxGroupComponent, el: ElementRef, domSanitizer: DomSanitizer, private ElementuiService: ElementuiService) {
    this.el = el;
    this.hostGroup = hostGroup;
    this.domSanitizer = domSanitizer;
  }

  ngAfterViewInit(): void {
    var _this = this;
    var /** @type {?} */ contentText = this.content && this.content.nativeElement.innerText;
    setTimeout(function () {
      _this.showLabel = !contentText || contentText.length < 1;
  }, 0);
  }
  writeValue(value: any): void {

  }
  registerOnChange(fn: any): void {
    this.controlChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.controlTouch = fn;
  }

 
  isChecked() {
    if (this.parentIsGroup) {
      return this.hostGroup.model.indexOf(this.label) > -1;
    }
    return this.model;
  }


  changeHandle(t: any) {
    this.parentIsGroup && this.hostGroup.updateModelFromChildren(t, this.label);
    this.model = t;
    this.checked = this.isChecked();
   
  }

  
  ngOnInit(): void {
    var _this = this;
    var /** @type {?} */ nativeElement = this.el.nativeElement;
    this.parentIsGroup = this.ElementuiService.isParentTag(nativeElement, 'el-checkbox-group');
    this.ElementuiService.removeNgTag(nativeElement);
    // update model from group
    if (this.parentIsGroup) {
      this.labels = this.hostGroup.model;
      this.size = this.hostGroup.size;
      this.model = this.isChecked();
      // update handle
      this.hostGroup.subscriber.push(function () { return _this.model = _this.isChecked(); });
    }
    this.checked = this.isChecked();
    this.styleStr = this.activeStyle();
  }

  checkboxSize() {
    return (this.hostGroup.size && this.border) ? ' el-checkbox-button--' + this.border : '';
  }

  activeStyle() {
    if (!this.hostGroup)
      return this.domSanitizer.bypassSecurityTrustStyle('');
    var /** @type {?} */ styles = "backgroundColor: " + this.hostGroup.fill + ";" +
      ("borderColor: " + this.hostGroup.fill + ";color: " + this.hostGroup.textColor + ";") +
      ("box-shadow: -1px 0 0 0 " + this.hostGroup.fill + ";");
    return this.domSanitizer.bypassSecurityTrustStyle(this.checked && !this.disabled ? styles : '');
  }
}
